<template>
  <div class="bread-crumb">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>{{ item?.first }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ item?.second}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
defineOptions({
  name: 'BreadCrumb'
})
const props = defineProps({
  item: Object
})
</script>

<style lang="scss" scoped>
  .bread-crumb {
    height: 30px;
    padding: 0 20px;
    display: flex;
    align-items: center;
  }

  :deep(.el-breadcrumb__item){
    height: 30px;
    font-size: 16px;
    line-height: 30px;
  }

  :deep(.el-breadcrumb__inner){
    font-weight: 500;
  }
</style>